import React, { useState, useEffect } from "react";
import {
  Form,
  Input,
  Button,
  Select,
  InputNumber,
  TreeSelect,
  Space,
  message,
  Radio,
  Switch,
  Checkbox,
  Row,
  Col,
  Tooltip
} from "antd";

import rule from "@/tool/formrule";
import { history } from "umi";
import * as Api from "@/servers/api";
import { traverse, lazyLoadTree } from "@/tool/Unitils";
import { connect } from "dva";
import "@/pages/index.less"; // 导入样式
import * as Api2 from "@/servers/DataPlan";

const AddView = (props: any) => {
  const layout = {
    // 表单对齐，
    labelCol: { span: 3 },
    wrapperCol: { span: 24 },
  };
  // <Form
  //   layout={'horizontal'}
  //   // labelCol={{ span: 4 }}  // 双花括号，设置样式
  //   // wrapperCol={{ span: 20 }}
  //   form={formInstance}

  // 表单统一的对齐
  const tailLayout = {
    wrapperCol: { offset: 10, span: 15 },
  };
  const [formInstance] = Form.useForm();

  const dataDomainIdWatch = Form.useWatch("dataDomainId", formInstance); // dataDomainIdWatch 可以判断显示div
  const refreshTimeWatch = Form.useWatch("refreshTime", formInstance); // dataDomainIdWatch变量，和useState变量一样

  const projectId = props.location.query.projectId || ""; // 路由参数
  const isEdit = props.location.query.isEdit || "";
  const Listid = props.location.query.id || "";
  const defaultkey = props.location.query.key || props.editItem.id;
  const itemp = props.location.query.itemp || {};

  const [sexList, setSexList] = useState([]);

  useEffect(() => {
    isEdit &&
      Api.fieldstandardDetail({ id: Listid }).then((res: any) => {
        console.log(res);
        res.data.referCodeId = res.data.referCodeId
          ? +res.data.referCodeId
          : res.data.referCodeId;
        formInstance.setFieldsValue(res?.data);
      });
    Api.codesstandard({
      pageIndex: 1,
      pageSize: 1000,
    }).then((res: any) => {
      setSexList(res?.data?.rows);
    });
  }, []);

  const [treeData, setTreeData] = useState(
    [
      ...props.TreeTable.datasource.treeData.map((item) => ({
        ...item,
        value: item.key,
      })),
    ] || []
  );

  const [selectValue, setSelectValue] = useState("");

  const [domainList, setDomainList] = useState([]);

  useEffect(() => {
    setSelectValue(defaultkey);
    itemp?.businessSegmentId &&
      Api2.GetBussinessDatas({
        pageIndex: 1,
        pageSize: 20,
        id: itemp?.businessSegmentId,
      }).then((res) => {
        setDomainList(res?.data?.rows);
      });
  }, [0]);

  const onChange = (value) => {
    setSelectValue(value);
  };

  const onFinish = (values) => {
    if (values.categoryId === 0) {
      message.error("不可保存至根目录下");
      return;
    }

    if (isEdit) {
      //修改
      Api.fieldstandardEdit({ ...values, id: Listid }).then((res) => {
        message.success("修改成功");
        goBack();
      });
    } else {
      //新增
      Api.fieldstandardcreate({ ...values }).then((res) => {
        message.success("保存成功");
        goBack();
      });
    }
  };
  const goBack = () => {
    history.goBack();
  };

  //懒加载
  const onLoadData = (nodeData: {}) => {
    return new Promise((resolve) => {
      if (nodeData.children && nodeData.children.length !== 0) {
        resolve();
        return;
      }
      Api.GetModels({
        pid: nodeData.key,
        projectId,
        categoryType: "MODEL",
      }).then((res) => {
        if (res.data && res.data.length) {
          //
          res.data.forEach((item) => {
            item.title = item.name;
            item.key = item.id;
            item.value = item.id;
            item.children = [];
          });
          if (res.data[0] && res.data[0].name) {
            let tree = lazyLoadTree(treeData, "key", nodeData.key, res.data); // 懒加载就是把res.data数据push到treeData里面，
            setTreeData([...tree]);
          }
        } else {
          //无
        }
        resolve();
      });
    });
  };
  // 居中分2种，文字居中，和div居中，margin auto
  // 封装组件，api通过参数传入，不要内部判断切换api

  // Modal.confirm({ // 只有confirm，有取消btn
  //   title: '提示',
  //   content: (
  //     <div>
  //       <p>检测到您有未保存的内容，建议您先保存再退出。</p>
  //     </div>
  //   ),
  //   onOk(close) {
  //     message.success('cg')
  //     close()
  //   },
  //   // centered: true,
  //   icon: null,
  //   closeIcon: true,
  //   onCancel(close) {
  //     close()
  //   },
  //   okText: '保存再退出',
  //   cancelText: '不保存',
  // });

  // const onOk = (value: DatePickerProps['value'] | RangePickerProps['value']) => {
  //   console.log('onOk: ', value);
  // };
  
  // const App: React.FC = () => (
  //   <Space direction="vertical" size={12}>
  //     <DatePicker showTime onChange={onChange} onOk={onOk} />
  //     <RangePicker
  //       showTime={{ format: 'HH:mm' }}
  //       format="YYYY-MM-DD HH:mm"
  //       onChange={onChange}
  //       onOk={onOk} // onOK在内部不覆盖，最后会调用一次，
  //     />

  // const [value4, setValue4] = useState('rate');
  // const onChange4 = ({ target: { value } }: any) => { // ev里面解构出val，antd的技术，onchnage1,2，3,4
  //   console.log('radio4 checked', value);
  //   setValue4(value);
  // };

  // 组件props，传入transform转换公式，UI组件封装原则
  // 封装组件，api通过参数传入

  // const onCheck2 = (checkedKeysValue: React.Key[]) => {
  //   console.log('onCheck963', checkedKeysValue);
  //   setCheckedKeys(checkedKeysValue); // 对所有的学校，同时保留一份扁平化的结构，方便回显，只增不减，数组的秒用， 分别为，数组对象，对象数组2类
  // };

        // // pid又变回key，和id匹配
        // const updateTreeData_tree = (list: any, key: any, children: any) =>
        // list.map((node: any) => { // list是tree_and_project，外部数组没有key，有id
        //   console.log('node---', node, key)
        //   if (node.id === key) {
        //     // big ke
        //     return {
        //       ...node,
        //       children,
        //     };
        //   }
        //   if (node.children) { // 并不是互斥的
        //     return {
        //       ...node,
        //       children: updateTreeData_tree(node.children, key, children),
        //     };
        //   }
        //   return node; // 最终返回dom，node，两个if里的return，加一个外部return，递归3r
        // });


        // const invoke2 = async () => {
        //   const res = await GetProjectList({
        //     pageSize: 1000,
        //     pageIndex: 1,
        //   });
        //   setprojectList(res?.data?.rows); // await和then返回值一样，还不如直接await
      
        //   Api.GetDomains({
        //     pageIndex: 1,
        //     pageSize: 20,
        //   }).then((res: any) => {
        //     setDomainList(res?.data?.rows);
        //   });

        // useEffect(() => {
        //   // 清空rightArr，下标数组也一并清空，各种记录的数组，前端业务就是数组的遍历操作
        //   setrightShowArr([]);
        //   setCheckedKeys([]); // 两棵树都清空
        //   setCheckedKeys2([]);
        //   setroleCheckbox([]);
        //   setroleCheckbox4([]);
        // }, [activeKey]);

//         <Form.Item
//         name="startTime_End" // name就是v-model 双向绑定
//         label="填写时间设置"
//         rules={[]}
//       >
//         <DatePicker.RangePicker
//           showTime
//           // ={{ format: 'HH:mm:ss' }} // 范围选择器
//           // format="YYYY-MM-DD HH:mm:ss"
//         />
//       </Form.Item>

// if (values.startTime_End.length === 2) { // 标准的时间组件格式化
//   values.startTime = moment(values.startTime_End[0]).format(
//     'YYYY-MM-DD HH:mm:ss',
//   );
//   values.endTime = moment(values.startTime_End[1]).format(
//     'YYYY-MM-DD HH:mm:ss',
//   );
// }

// const toPublish = () => {
//   const schema3 = instance2ref?.current?.getValue(); // 不能从ins实例上拿，放到公共变量里面，
//   const keyArr = Object.keys(schema3?.properties);

// onClick={() => {
//   let input = document.createElement('input');
//   input.setAttribute('readonly', 'readonly');
//   input.setAttribute('value', 'http://172.16.10.70:8081/#/System/MyFill');
//   document.body.appendChild(input); // 类似于modal弹窗，插入body里面
//   input.select();
//   input.setSelectionRange(0, 9999);
//   if (document.execCommand('Copy')) {
//     message.success('复制成功！');
//   } else {
//     message.error('复制失败！');
//   }
// }}

// 独占一行 20不够24也行
{/* <Row gutter={[15, 15]}>
    {roleList.map((item: any, index: any) => {
      return (
        <Col span={20} key={index}>
          <Checkbox value={item?.id}>
            {item?.name}
          </Checkbox>
        </Col>
      );
    })}
  </Row> */}

  // const [rangeVal, setrangeVal] = useState([])
  // const [rangeVal_cc, setrangeVal_cc] = useState([])

  // const onChangeRange = (date: any, dataString: any) => {
  //   setrangeVal(date) // 受控组件，需要set到val
  //   setrangeVal_cc(dataString)
  //   console.log(date, dataString)
  // }

  // <RangePicker value={rangeVal} onChange={(date: any, dataString: any) => {
  //   onChangeRange(date, dataString) // 时间组件ove
  // }} />

  // name={[item.name, 'foreignKey']}
  // fieldKey={[item.fieldKey, 'foreignKey']} 知道是可以批量操作，定是，现在不妨假设一下zixi

  // array, json, in of

  // <Tabs centered activeKey={activeKey} onChange={onChangeTabs}>
  //                 <Tabs.TabPane tab={'按组织机构'} key="2">
  //                   <div style={{ marginLeft: 20 }}>
  //                     <Tree
  //                       checkable
  //                       onCheck={onCheck2}
  //                       checkedKeys={checkedKeys2}
  //                       treeData={upperGroup_tree}
  //                       checkStrictly={true} // 选择父级，不再关联子级，但是多了一个checked子属性
  //                       loadData={onLoadData_tree}
  //                       fieldNames={{
  //                         title: 'name',
  //                         key: 'id',
  //                         children: 'children',
  //                       }}
  //                     />
  //                   </div>
  //                 </Tabs.TabPane>

  // const onCheck2 = (checkedKeysValue: React.Key[]) => { // 提高效率
  //   console.log('onCheck963', checkedKeysValue);
  //   setCheckedKeys2(checkedKeysValue.checked); // 对所有的学校，同时保留一份扁平化的结构，方便回显，只增不减
  // };

//   Modal.confirm({
//     title: '提示',
//     content: '确定要删除该数据吗？',
//     onOk: (close) => {
//       delbatch()
//       close()
//     }
//   })

//   <Scrollbars autoHide style={{ height: '80vh' }}>
//   <Table
//     style={{ width: '98%' }}
//     scroll={{ x: 'max-content' }} // table， 2行代码，实现横向滚动条
//     columns={columns}
//     dataSource={tableData}
//     pagination={paginationOption}
//     onChange={onChangeEveryWatch}
//     rowSelection={rowSelection}
//     rowKey={record => record?.bigdata_uuid}
//   />
// </Scrollbars>

{/* <Scrollbars autoHide style={{ height: document.querySelector('#aabbcc')?.clientHeight + 80 }}>
            <Table
              style={{ width: '98%' }}
              scroll={{ x: 'max-content' }}
              id="aabbcc"
              columns={columns}
              dataSource={tableData}
              pagination={paginationOption}
              onChange={onChangeEveryWatch}
              rowSelection={rowSelection}
              rowKey={record => record?.bigdata_uuid}
            />
          </Scrollbars> */}

          const columns3 = [ // 都是json变量，window。a =111,都带命名空间,json和array的操作，所业务
            {
              title: '合计',
              dataIndex: 'sum',
              align: 'left',
            },
          ]

        // } else if (isChanged1 == 'yes' || isChanged2 == 'yes' || isChanged3 == 'yes' || isChanged4 == 'yes' ) {
        //   Modal.confirm({
        //     title: '提示',
        //     content: (
        //       <div>
        //         <p>检测到您有未保存的内容，建议您先保存再发布。</p>
        //       </div>
        //     ),
        //     async onOk(close) { // async，await链条
        //       isChanged1 == 'yes' && await formInstance.submit()
        //       isChanged2 == 'yes' && await formInstance5.submit()
        //       isChanged3 == 'yes' && await formInstance3.submit()
        //       isChanged4 == 'yes' && await formInstance4.submit()
        //       close();
        //       handleOk_publish();
        //     },

        // this.mgr.signinRedirect().catch(function (err: any) {
        //   console.log(err); // catch和then方法，then和catch都会返回一个新的Promise。
        // });

        // for(){
        //   const [aa, setaa] = useState('') // 想通过for循环创建state，行不通
        // }// 先用arr接收，for之后，整体setstate

        // useEffect(() => {
        //   if(JSON.stringify(statnumberJson2) !== '{}') {
        //     setTimeout(()=>{ // useEffect是不是模仿了setTimeout了
      
        //       let idx = 0
        //       for (let key in statnumberJson2) {
        //         drawPie(statnumberJson2[key], key + idx); // 绘制饼图
        //         ++idx
        //       }
        //     }, 1000)
        //   }
        // }, [statnumberJson2]) 
        // ast的格式，和低代码的schema一模一样

        // const debouncedValue = useDebounce(tmpinputValue, debounceTime || 1000);
        // useEffect(() => {
        //   if (refreshSign) {
        //     refreshSign(debouncedValue);
        //   }
        // }, [debouncedValue]); // 监听的是debounce之后的值，

        // 2个环境，1个报错，另一个不报错，是数据导致的问题，
        // put请求，直接传递数组参数，不是json格式
        // export const standardcodecreate = (params: any) => {
        //   return axios.post(`${dataPlanIP}/standard/code/create`, params); params = []格式
        // };

        // for (let key3 of Object.keys(item)) {
        //   const flag3 =
        //     key3.includes('select') ||
        //     key3.includes('multiSelect') ||
        //     key3.includes('checkboxes') ||
        //     key3.includes('radio');
        //   if (flag3) {
          // 先找到分布规律，

          const [cols2, setcols2] = useState([
            {
              title: '提交时间',
              dataIndex: 'create_time',
              fixed: 'right',
              sorter: (a: any, b: any) => moment(a.create_time) - moment(b.create_time),
              filterDropdown: ({ // 2种，1，直接输入，2，复选框，option需要调api接口
                setSelectedKeys,
                selectedKeys,
                confirm,
                clearFilters,
              }) => (
                <div style={{ padding: 8, width: 250 }}>
                  <Input
                    placeholder="请输入"
                    // value={code}
                    // onChange={e => setcode(e.target.value)}
                    // onPressEnter={() => {
                    //   console.log(132);
                    // }}
                    style={{ width: '100%', marginBottom: 8, display: 'block' }}
                  />
                  <div
                    style={{
                      width: '100%',
                      marginTop: '8px',
                      display: 'flex',
                      justifyContent: 'space-between',
                    }}
                  >
                    <Button
                      onClick={() => {
                        // setcode('');
                      }}
                      size="middle"
                      style={{ width: 90 }}
                    >
                      重置
                    </Button>
                    <Button
                      type="primary"
                      icon={<SearchOutlined />}
                      onClick={() => {
                        getRightOnePage({
                          current: current2,
                          pageSize: pageSize2,
                          filter: [
                            {
                              field: 'number_Bq3UYV',
                              values: ['44'],
                              relation: 'IN',
                              value: '',
                              getlSign: '',
                              getrSign: '',
                              logic: '',
                            }
                          ]
                        });
                      }}
                      size="middle"
                      style={{ width: 90 }}
                    >
                      确定
                    </Button>
                  </div>
                </div>
              ),
            },
          ]);

            //自定义筛选菜单
  // const getColumnSearchProps = item => {
  //   return {
  //     filterDropdown: ({
  //       setSelectedKeys,
  //       selectedKeys,
  //       confirm,
  //       clearFilters,
  //     }) => (
  //       <MZFilterView  //   const [selectList, setSelectList] = useState(selects || []); 组件里面，缓存每一列的值，不组件化还不方便缓存，
  //                            const [dataList, setDataList] = useState([]); // 
  //         item={item}
  //         selects={filterFieldDic[item.name]?.values || []}
  //         api={searchFieldApi}
  //         request={{ id, field: item.name }}
  //         placeholder={`请输入 ${item.zhName}`}
  //         sureFilters={selectList => {
  //           console.log('点击，item, 和selectList', item, selectList);
  //           filterSureBtn(item, selectList);
  //         }}
  //         confirm={confirm}
  //       ></MZFilterView>
  //     ),
  //   };
  // };

  // <Form
  //     labelCol={{ span: 4 }}
  //     wrapperCol={{ span: 14 }}
  //     layout="horizontal"
  //     initialValues={{ size: componentSize }}
  //     onValuesChange={onFormLayoutChange}
  //     size={componentSize as SizeType} // as直接用
  //     style={{ maxWidth: 600 }}
  //   ></Form>

  // const App: React.FC = () => {
  //   const [bordered, setBordered] = useState(false);
  //   const [loading, setLoading] = useState(false);
  //   const [size, setSize] = useState<SizeType>('large');
  //   const [expandable, setExpandable] = useState<ExpandableConfig<DataType> | undefined>(defaultExpandable);
  //   const [showTitle, setShowTitle] = useState(false);
  //   const [showHeader, setShowHeader] = useState(true);
  //   const [showfooter, setShowFooter] = useState(true);
  //   const [rowSelection, setRowSelection] = useState<TableRowSelection<DataType> | undefined>({});
  //   const [hasData, setHasData] = useState(true);
  //   const [tableLayout, setTableLayout] = useState();
  //   const [top, setTop] = useState<TablePaginationPosition | 'none'>('none');
  //   const [bottom, setBottom] = useState<TablePaginationPosition>('bottomRight');
  //   const [ellipsis, setEllipsis] = useState(false);
  //   const [yScroll, setYScroll] = useState(false);
  //   const [xScroll, setXScroll] = useState<string>(); 
  // 15个state，还是官方,15个链表
  
  //   const handleBorderChange = (enable: boolean) => {
  //     setBordered(enable);
  //   };

  const [resdata, setresdata] = useState({} as unknown as undefined);

  // 请注意：引入的地址不要直接写成http://，因为在开启了https的站点这样的做法是跨域的。应当保留//的写法使浏览器根据网站所采用的协议来自动加载 bridge 脚本。

//   引入 jsbridge 直接从通过以下方式引入：

// <script
//   type="text/javascript"
//   src="//portal.zjzwfw.gov.cn/assets/jsbridge/1.0.0/jsbridge.js"
// ></script>

// 但是由于 VUE 启动的时机和 JSBridge 的初始化是异步的，这种情况无法保证 bridge 是 ready 的，因此 JSBridge 会有 JSBridgeReady 事件通知，建议在监听到事件通知后，进行后续流程（此处需要评估 Bridge 调用时间，如果调用是用户触发的，可以不阻塞 VUE 初始化）

// document.addEventListener('JSBridgeReady', function() {
//   new Vue({
//     ...
//   })
// }, false);

// 参数	说明
// data.authLevel	用户认证等级
// data.loginname	用户登录名
// data.username	用户名
// data.uniscid	用户id
// data.telephone	用户手机号
// data.mobile	用户手机号
// data.idnum	用户身份证号
// data.passport	护照
// data.sex	性别
// data.driverlicense	驾驶证
// data.headpicture	头像地址 66666666666
// data.permitlicense	港澳通行证
// data.officerlicense	军官证
// data.nation	民族

 // 常见UI，场景组件
 // tft,mml,bsg 9大任意场景组件，laoji，xianshu
 // 任意flex布局,data前端数据流驱动

//  <Form.Item
//   label="空值校验"
//   name="nullValueCheck"
//   valuePropName="checked" //why，be没value属性 // 代替value={} ，换成checked={}
//   >
//  <Checkbox>空值校验</Checkbox>
// </Form.Item>

// valuePropName	子节点的值的属性，如 Switch 的是 'checked'。该属性为 getValueProps 的封装，自定义 getValueProps 后会失效

// trigger	设置收集字段值变更的时机（外界you指定触发时机）。点击此处查看示例	string	onChange
{/* <div style={{border: '1px solid #eee', width: '50%', flex: 1 }}>1</div> */} // 同时设置，width将失效，包括wrap也对width失效，

// <div style={{display: 'flex', border: '1px solid #eee', width: '50%', flexWrap: 'wrap'}}>
// {
//   Array(20).fill(1).map(item=>(
//     <div style={{border: '1px solid #eee', width: '80px' }}>1</div>
//   ))
// }
// </div>

// .addnew {
//   font-size: 18px;
//   font-family: PingFang SC-Medium, PingFang SC;
//   font-weight: 500;
//   color: #ffffff;
//   width: max-content; // max配合flex布局wudi
// }


// .tooltip:hover .tooltiptext { // antd所有组件的样式，都由hover实现了交互动效，威力，全靠hover
//   visibility: visible;
// }
// </style>
// <body style="text-align:center;">

// <div class="tooltip">鼠标移动到这
// <span class="tooltiptext">提示文本</span>
// </div>

// div
// {
// 	width:100px;
// 	height:100px;
// 	background:red;
// 	animation:myfirst 5s; // 5s后触发，类似于hover触发，
// 	-webkit-animation:myfirst 5s; /* Safari and Chrome */
// }

// @keyframes myfirst

// 当然clrear只是清空画布，并不会清空实例，如果你需要实例的话，需要用到这个属性

// myChart.dispose();
// 官方给的说明:销毁实例，实例销毁后无法再被使用。 实例占有内存，dispose释放掉内存memory

//  教程HTML5 教程CSS3 教程Bootstrap4 前端基础gongli 345

// 1s = 1000ms

// 1ms = 1000μs

// 四、列表控件配置项
// 可动态增减的表单项


// list: { // list 是字段名
//   title: '人员列表',
//   type: 'array', // 表单元素类型总共有三种：item，object，list。list为array
//   widget: 'card', 
//   min: 1,
//   max: 5,
//   items: { // array紧跟items，antd表单批量fields。add，remove，提供内置方法
//     title: '基础信息',
//     type: 'object',
//     properties: {}
//   },
// }
// 2个type，type跟properties，type跟title

// for配合，组件化，dom的生命周期可以调用接口，不组件化做不到

// sessionStorage.removeItem('access_token'); // 清除某一个字段，

// input: {
//   title: '输入框',
//   type: 'string',
//   widget: 'input' textArea, textarea,版本更新
// },

// npm i fr-generator
// getValue	获取导出的 schema 值	-
// setValue	从外部强制修改 schema

// npm i @xrenders/schema-builder --save // 啥也没有
// onClick	按钮点击回调函数	(schema) => void

// ------拿结构，拿值
// npm i form-render --save
// setValues	外部手动修改 formData，用于已填写的表单的数据回填 // 带s的是值，反而不是结构
// getValues	获取表单内部维护的数据, 如果参数为空则返回当前所有数据

{/* <FormRender 前提是有结构schema */}

{/* <Generator
widgets={{ NewWidget }}
settings={[
  {
    title: '个人信息',
    widgets: [
      {
        text: '计数器',
        name: 'asyncSelect',
        schema: { // 原来每一个widget都循环使用render组件渲染单独一个antd组件，render组件在内部被循环，每一个widget都必须配置schema字段，一个schema字段一一对应1一个render
          title: '计数器', // Generator只不过是对render组件做了遍历操作，
          type: 'number',
          widget: 'NewWidget',
        },
        setting: {
          api: { title: 'api', type: 'string' },
        },
      }, */}


      // setting: {
      //   api: { title: 'api', type: 'string' }, // 花括号外层是字段名
      // },
      // description: {
      //   title: '自定义共通用的入参',
      //   type: 'string', // 如果有format字段，就是多行文本textarea，不是单行文本，
      // },
      // maxLength: { title: '最长字数', type: 'number' }, // number默认就是数字输入框，string默认就是文本输入框，都有默认值，

      // "textarea_VWd61S": {
      //   "title": "编辑框",
      //   "type": "string", // 此时type确定不下来，需要配合format才能确定，
      //   "format": "textarea",
      //   "props": {}
      // },

      // "number_Z0SflT": {
      //   "title": "数字输入框",
      //   "type": "number" // 对于number类型，可以唯一确定，不需要widget帮忙
      // },

      // "switch_Gn3rtj": {
      //   "title": "是否选择",
      //   "type": "boolean", // boolean对应2种组件，Switch和checkbox，确定不了，
      //   "widget": "switch"
      // },
      // "checkbox_0UwZWQ": {
      //   "title": "是否选择",
      //   "type": "boolean", ---------------// type变，widget也变
      //   "widget": "checkbox"
      // }

      // return (
      //   <div>
      //     <div style={{display: 'flex', flexDirection: 'column', height: '90vh'}}> // height: '100%' 不顶用，要设置具体值，不能是百分比，块级元素width默认是一整行的100%，撑满一行div，
    
      //       <div style={{border: '1px solid red',flex:1}}>1</div>
      //       <div style={{border: '1px solid gray'}}>2</div>
      //     </div>
      //   </div>
      // )

  return (
    <div>
      <Form
        layout="vertical"
        form={formInstance}
        labelCol={{span: 6}}
        wrapperCol={{span: 15}}
        // style={{ width: "70%", marginTop: 30 }}
        onFinish={onFinish}
      >
        <Form.Item
          name="code" // name就是v-model 双向绑定
          label="标准编号"
          rules={[rule.required]}
        >
          <Input
            placeholder="请输入标准编号，可输入字母、数字、下划线"
            maxLength={30}
            showCount
          />
        </Form.Item>
        <Form.Item
          name="dataLength" // name就是v-model 双向绑定
          label="字段长度"
          rules={[]}
        >
          <InputNumber
            placeholder="请输入字段长度，只能输入数字"
            style={{ width: "100%" }}
            maxLength={30}
            min={1}
          />
        </Form.Item>
        <Form.Item
            name="storageLocation" // name就是v-model 双向绑定
            label="数据存储位置"
            rules={[]}
          >
            <Radio.Group
            >
              <Radio value={1}>数据中台</Radio>
              <Radio value={2}>表单应用数据库</Radio>
              <Radio value={3}>数据中台和表单应用数据库</Radio>
            </Radio.Group>
          </Form.Item>
        <Form.Item
            name="storageLocation" // name就是v-model 双向绑定
            label="数据存储位置"
            rules={[]}
          >
            <Checkbox.Group 
              // onChange={onChange2}
              // value={value2}
            >
              <Row>
                <Col span={8}>
                  <Checkbox value="A">A</Checkbox>
                </Col>
                <Col span={8}>
                  <Checkbox value="B">B</Checkbox>
                </Col>
                <Col span={8}>
                  <Checkbox value="C">C</Checkbox>
                </Col>
              </Row>
            </Checkbox.Group>
          </Form.Item>
          
          <Form.Item
            name="defaultValue" // name就是v-model 双向绑定
            label="给填写人发送消息"
            rules={[]}
          >
            <Switch defaultChecked />
          </Form.Item>
        <Form.Item
          name="referCodeId" // name就是v-model 双向绑定
          label="引用代码"
          rules={[]}
        >
          <Select
            placeholder="请选择"
            allowClear
            getPopupContainer={(triggerNode) => triggerNode.parentElement}
            fieldNames={{ label: "zhName", value: "id" }} // 省的自己去递归
            options={sexList}
          ></Select>
        </Form.Item>
        <Form.Item
          name="categoryId"
          label="所属目录"
          rules={[rule.required]}
          // initialValue={ // 别这样的用法
          //   Number(props.location.query.categoryId) || props.editItem.categoryId
          // }
        >
          <TreeSelect
            treeDefaultExpandedKeys={[0]}
            style={{ width: "100%" }}
            value={selectValue}
            dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
            placeholder="请选择"
            onChange={onChange}
            loadData={onLoadData}
            treeData={treeData}
          />
        </Form.Item>
        {/* 分区组件，不需要传递props下去，分区是function组件，复用代码 */}
        {/* <AddFenqu></AddFenqu> */}
        <Form.Item 
          labelCol={{span: 6}}
          wrapperCol={{offset: 10, span: 12}}
        >
          <Space>
              <Button type="primary" htmlType="submit">
                保存
              </Button>
              <Button
                onClick={() => {
                  // goBack();
                }}
              >
                取消
              </Button>
            </Space>
        </Form.Item>
      </Form>

      {/* 文案提示，直接的标准哦 */}

      <div className="card_title" style={{ color: 'black' }}>
          存储空间预警
          <Tooltip
            overlayInnerStyle={{ width: '350px' }}
            color={'white'}
            title={
              <div style={{ color: 'black' }}>
                存储空间占用率小于65%：存储空间充足
                <br />
                存储空间占用率处于65%-85%：存储空间紧张
                <br />
                存储空间占用率大于等于85%：存储空间极度紧张
              </div>
            }
            placement="topRight"
          >
            <InfoCircleOutlined style={{ marginLeft: '5px' }} />
          </Tooltip>
        </div>
    </div>
  );
};

const mapStateToProps = (state: any) => {
  const editItem = state["model_edititem"].editItem;
  const { TreeTable } = state.model_treeTableModel;

  const { User } = state.model_user; // 解构层级
  return {
    editItem,
    TreeTable,
    User,
  };
};

export default connect(mapStateToProps)(AddView);
